<template>
    <div class="operationRecords">
        <div style="padding: 0 30px;margin-top: 10px;">
            <SearchComponent :searchConfig="searchConfig" @resetFn="reset" @searchFn="queryFn">
                <template #createBy>
                    <el-select
                        v-model="createBy"
                        :remote-method="remoteMethod"
                        clearable
                        filterable
                        placeholder="修改人"
                        remote
                        reserve-keyword
                        style="width: 100%"
                        @change="selectInputChange"
                        @focus="focus('borrowNo')"
                    >
                        <el-option
                            v-for="item in createByOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </template>
            </SearchComponent>


            <TableComponent :assetList="recordsList" :tableColumns="tableColumns" element-loading-text="加载中...">
                <template #strategyId="{row}">
                    <span>T{{ row.strategyId }}</span>
                </template>
            </TableComponent>
            <el-pagination v-model:page-size="pageData.size" :currentPage="pageData.current"
                           :page-sizes="[10,20, 30, 40, 50]"
                           :total="pageData.total"
                           background layout="total, sizes, prev, pager, next, jumper"
                           style="margin-top: 20px;float: right"
                           @size-change="handleSizeChange" @current-change="pageChange">
            </el-pagination>
        </div>
    </div>
</template>

<script setup>


import SearchComponent from "@/components/SearchComponent.vue";
import TableComponent from "@/components/TableComponent.vue";
import {operationHistoryApi} from "@/api/carManage/policyManage";
import {onMounted, reactive, ref} from "vue";
import {searchConfig, tableColumns} from "@/constant/operationRecordsConfig";
import {getAllUserData} from "@/api/asset";
import {removeNull} from "@/utils/util";

const pageData = reactive({
    size: 10,
    current: 1,
    total: 0
})
const filterObj = ref({
});
const createBy=ref()
const recordsList = ref([]);
const getOperationRecords = (size = 10) => {
    operationHistoryApi({
        ...removeNull(filterObj.value),
        ...pageData,
        size: size
    }).then(res => {
        if (res.data.code === 200) {
            recordsList.value = res.data.data.records;
            pageData.total = res.data.data.total;
            pageData.current = res.data.data.current;
        }
    })
}

const queryFn = (para) => {
    if (para.strategyId && para.strategyId.charAt(0)==='T'){
        para.strategyId =  para.strategyId.slice(1);
    }
    pageData.current=1;
    filterObj.value = {
        ...para,
        createBy:createBy.value
    };
    getOperationRecords(pageData.size);
};
const createByOptions=ref([])
const selectInputChange = (val) => {

}
const remoteMethod = (query, userId, id) => {
    createByOptions.value = [];
    if (query !== '' || id != '') {
        getAllUserData({
            username: query,
            employeeId: id
        }).then((res) => {
            if (res.data.code == 200) {

                if (res.data.data.records.length > 0) {
                    res.data.data.records.forEach((item, index) => {
                            createByOptions.value.push({
                                value: item.employeeId,
                                label: item.username + '/' + item.employeeId
                            })
                    })
                } else {
                    createByOptions.value = [{
                        value: query,
                        label: query
                    }]
                }

            }
        })
    } else {
        createByOptions.value = [];
    }
}
const focus = (focus) => {
}
const reset = () => {
    filterObj.value = {};
    pageData.current = 1;
    createBy.value='';
    getOperationRecords(pageData.size);
};
onMounted(() => {
    getOperationRecords()
})


const handleSizeChange = (number) => {
    pageData.size = number;
    getOperationRecords(number)
}

const pageChange = (val) => {
    pageData.current = val;
    getOperationRecords(pageData.size);

}

</script>

<style lang="less" scoped>


</style>